<template>
  <div class="dashboard-container">
    <div class="top-panel">
      <div class="left-top">
        <video-player
          :currentVideo="selectedVideo"
          :currentCameraId="currentCameraId"
        ></video-player>
      </div>
      <div class="right-top">
        <statistics-page></statistics-page>
      </div>
    </div>
    <div class="bottom-panel">
      <photo-list
        :currentCameraId="currentCameraId"
        @open-lightbox="showPlaceholder"
        @close-lightbox="hidePlaceholder"
      ></photo-list>
    </div>
    <div v-if="isPlaceholderVisible" class="placeholder"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";
import { useStore } from "vuex"; // 引入 Vuex
import VideoPlayer from "@/components/VideoPlayer.vue"; // 确保路径正确
import StatisticsPage from "@/components/StatisticsPage.vue"; // 确保路径正确
import PhotoList from "@/components/PhotoList.vue"; // 引入 PhotoList 组件

export default defineComponent({
  components: {
    VideoPlayer,
    StatisticsPage,
    PhotoList, // 注册 PhotoList 组件
  },
  setup() {
    const store = useStore(); // 使用 Vuex store

    const selectedVideo = computed(() => store.getters.getSelectedVideo); // 从 Vuex store 获取当前选择的视频流
    const currentCameraId = computed(() => store.getters.getCurrentCameraId); // 从 Vuex store 获取当前摄像头 ID
    const isPlaceholderVisible = ref(false); // 控制占位符可见性
    const showPlaceholder = () => {
      console.log("接收到放大图片事件");
      isPlaceholderVisible.value = true; // 显示占位符
      // document.body.style.overflow = "hidden"; // 锁定滚动
      setTimeout(() => {
        window.scrollTo(0, document.body.scrollHeight); // 瞬时滚动到页面底部
      }, 50); // 确保占位符显示后再显示大图
    };

    const hidePlaceholder = () => {
      console.log("接收到取消放大图片事件");
      isPlaceholderVisible.value = false; // 隐藏占位符
      // document.body.style.overflow = ""; // 解除锁定滚动
      window.scrollTo(0, 0); // 滚动到页面顶部
    };
    return {
      selectedVideo,
      currentCameraId,
      isPlaceholderVisible,
      showPlaceholder,
      hidePlaceholder,
    };
  },
});
</script>

<style scoped>
.dashboard-container {
  display: flex; /* 使用 flexbox 布局 */
  flex-direction: column; /* 设置主轴为垂直方向 */
}

.top-panel {
  display: flex; /* 使用 flexbox 布局 */
  flex: 1; /* 占用可用空间 */
}

.left-top {
  flex: 1; /* 左上部分占用一半宽度 */
  padding: 10px;
}

.right-top {
  flex: 1; /* 右上部分占用一半宽度 */
  padding: 10px;
}

.bottom-panel {
  flex: 1; /* 下方部分占用剩余空间 */
  height: 100%;
  padding: 10px;
  overflow-y: auto; /* 如果有很多内容，允许垂直滚动 */
}

.placeholder {
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离顶部 0 */
  left: 0; /* 距离左侧 0 */
  width: 100%; /* 宽度占满父容器 */
  height: 500vh; /* 高度超过整个屏幕 */
  background-color: rgba(255, 255, 255, 0.5); /* 半透明背景色以示区分 */
  z-index: 999; /* 确保占位符在其他元素上 */
}
</style>
